<template>
   <div style="height:100%;">
      <div class='header-title'>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>硬件信息</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/gateway' }">网关信息管理</el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--数据筛选条件+按钮-->
      <el-row class='subjectMana filterForm' v-bind:style="{width: tableWidth + 'px'}">
        <el-form v-model="filterForm" ref="filterForm":inline="true">
          <el-form-item style="float:right">
            <el-button type="primary" @click="getCollegeListFro()" style="">查询</el-button>
            <el-button type="warning" :disabled="isAdmin" @click="addVisable = true" style="margin-right:15px">添加</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!--表格数据-->
      <el-row style="margin-top:10px">
        <el-table
          v-loading="loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          :data="filterFormFro.tableData" 
          :border="true"
          :row-class-name="tableRowClassName"
          :header-cell-class-name = "tableHeaderClassName"
          v-bind:style="{width: tableWidth + 'px'}">
            <el-table-column prop="index" label="序号" sortable min-width="15%">
            </el-table-column>
            <el-table-column prop="college" label="网关信息" min-width="25%">
            </el-table-column>
            <el-table-column label="操作"  width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  :disabled="isAdmin"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  :disabled="isAdmin"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 添加学院信息弹窗 -->
      <el-dialog title="增加网关"  :visible.sync="addVisable"
          :closeOnClickModal="false"
          :close-on-click-modal="false" 
          :close-on-press-escape="false"
          width="550px"
          class="categoryManaDialog"
          @close="resetForm('addForm')">
        <el-form :model='addForm' ref="addForm" :rules="addRules">
            <el-form-item label="网关名称：" :label-width="formLabelWidth" prop="college">
              <el-input style='width:240px' clearable placeholder="请输入网关名称" v-model="addForm.college"></el-input>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth" >
              <el-button style="width:240px" type="primary" @click="submitAdd()">保 存</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 编辑学院信息弹窗 -->
      <el-dialog title="编辑网关信息"   :visible.sync="editVisable"
          :closeOnClickModal="false" 
          width="550px"
          class="categoryManaDialog"
          :close-on-click-modal="false" 
          :close-on-press-escape="false"
          @close="resetForm('editForm')">
        <el-form :model='editForm' ref="editForm" :rules="editRules">
            <el-form-item label="网关名称：" :label-width="formLabelWidth" prop="college">
              <el-input style='width:300px' clearable v-model="editForm.college"></el-input>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth" >
              <el-button style="width:240px" type="primary" @click="submitEdit()">保 存</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>
<script>
import '../../../static/css/gateMana/common.css'
import '../../../static/css/gateMana/gateway.css'
export default {
  created () {
    sessionStorage.getItem('isAdmin') === 'false' ? this.isAdmin = false : this.isAdmin = true
  },
  data () {
    return {
      filterForm: { // 筛选表单
        subject: ''
      },
      isAdmin: true,
      filterFormFro: {
        tableData: [],
        allPages: 1
      },
      tableWidth: '', // 表格宽度
      loadingText: '正在拼命加载中，请稍等......',
      loading: false,
      paginationVisible: false, // 表格下方的分页显示
      noteVisible: false,
      formLabelWidth: '150px',
      addForm: {
      },
      addVisable: false,
      editVisable: false,
      editForm: {
      },
      deleteForm: {
      },
      addRules: {
      },
      editRules: {
      }
    }
  },
  methods: {
    /** ********************************* 页面处理数据格式等函数 ************************************************ */
    tableHeaderClassName ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'headerClass'
      }
    },
    tableRowClassName ({row, rowIndex}) {
      return 'rowClass'
    },
    // 点击表格中的“编辑”按钮
    handleEdit (index, row) {
      console.log(row)
      this.editVisable = true
    },
    // 点击表格中的“删除”按钮
    handleDelete (index, row) {
      let data = this.filterFormFro.tableData[index]
      this.deleteForm.collegeId = data.collegeId
      this.$confirm('确定删除该信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCollegeFro()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 重置表单
    resetError (formName) {
      this.$nextTick(function () {
        this.$refs[formName].resetFields()
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$nextTick(function () {
        this.$refs[formName].resetFields()
      })
    },
    // 增加学院，点击“保存”
    submitAdd () {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.addCollegeFro()
        } else {
          return false
        }
      })
    },
    // 编辑专业信息，点击“保存”
    submitEdit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.editCollegeFro()
        } else {
          return false
        }
      })
    }
    /** ***************************** 向后台发送请求 ***************************************** */
  },
  mounted () {
    this.tableWidth = document.body.scrollWidth - 259 - 20
  }
}
</script>
